<template>
  <view>
    <view class="topSty">
      <view :style="{ height: statusBarHeight + 'px' }"></view>
      <div class="header">
        <div class="back center" @click="back">
          <image
            src="/static/icon/back.png"
            mode="widthFix"
            class="w-20"
          ></image>
        </div>
        {{$t('车辆管理')}}
      </div>
    </view>
    <!-- <div class="pt-20">
			<u-navbar title="车辆管理" :autoBack="true" @rightClick="submit_sub" :statusBarHeight="statusBarHeight">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" size="50"></u-icon>
				</view>
				<view class="u-nav-slot" slot="right">
					<view class="fz26" style="color: #278AFF;">{{$t('修改')}}/{{$t('保存')}}</view>
				</view>
			</u-navbar>
		</div> -->
    <view class="bor_bgff screen" >
      <template  v-if="driverInfor && driverInfor.mode == 2">
        <view class="title">
          <text style="color: red">*</text>
          {{$t('绑定司机')}}
          <view
            class="xuan"
            @click="pickerDriver = true"
            v-if="identity_type != 8"
          >
            {{$t('选择司机')}}
          </view>
        </view>
    
        <view class="transport" @click="pickerDriver = true">
          <view class="transport_name">
            {{ pickerForm.driverName || $t('请选择') }}
          </view>
          <u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
        </view>
      </template>
      
      <view class="title"> <text style="color: red">*</text>{{$t('运输类型')}} </view>
      <view class="transport" @click="pickerTran = true">
        <view class="transport_name">
          {{ pickerForm.transportName || $t('请选择') }}
        </view>
        <u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
      </view>

      <view class="title"> <text style="color: red">*</text>{{$t('载具类型')}} </view>
      <view class="transport" @click="pickerCategoryChange">
        <view class="transport_name">
          {{ pickerForm.car_category_name || $t('请选择') }}
        </view>
        <u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
      </view>
      <view class="title" v-if="pickerForm.transportVal == 2">
        <text style="color: red">*</text>车牌号-{{$t('挂')}}{{$t('车号')}}
      </view>
      <view class="title" v-if="pickerForm.transportVal == 3">
        <text style="color: red">*</text>{{$t('航班号')}}
      </view>
      <view class="title" v-if="pickerForm.transportVal == 4">
        <text style="color: red">*</text>{{$t('箱号')}}
      </view>
      <view class="title" v-if="pickerForm.transportVal == 5">
        <text style="color: red">*</text>{{$t('车号')}}
      </view>
      <view
        class="publish_time_calendars"
        v-if="pickerForm.transportVal && pickerForm.transportVal == 2"
      >
        <view class="item">
          <u-input
            v-model="pickerForm.car_number"
            class="info_input"
            placeholder="请输入"
          />
        </view>
        <view class="line"></view>
        <view class="item">
          <u-input
            v-model="pickerForm.trailer_number"
            class="info_input"
            placeholder="请输入"
          />
        </view>
      </view>
      <view
        class="publish_time_calendars"
        v-if="pickerForm.transportVal && pickerForm.transportVal != 2"
      >
        <view class="items">
          <u-input
            v-model="pickerForm.car_number"
            class="info_input"
            placeholder="请输入"
          />
        </view>
      </view>
      <view class="title"> <text style="color: red">*</text>{{$t('载具尺寸')}} </view>
      <view class="item_cc">
        <view class="item">
          <u-input
            type="number"
            placeholder=""
            v-model="pickerForm.car_l"
            fontSize="24rpx"
            shape="circle"
            border="none"
            :customStyle="{
              width: '100%',
              background: '#F6F7FB',
              height: '70rpx',
              padding: '0 20rpx',
            }"
          >
            <template v-slot:suffix>
              <view class="unit"> {{$t('米')}} </view>
            </template>
          </u-input>
        </view>
        <view class="item">
          <u-input
            type="number"
            placeholder=""
            v-model="pickerForm.car_w"
            fontSize="24rpx"
            shape="circle"
            border="none"
            :customStyle="{
              width: '100%',
              background: '#F6F7FB',
              height: '70rpx',
              padding: '0 20rpx',
            }"
          >
            <template v-slot:suffix>
              <view class="unit"> {{$t('米')}} </view>
            </template>
          </u-input>
        </view>
        <view class="item">
          <u-input
            type="number"
            placeholder=""
            v-model="pickerForm.car_h"
            fontSize="24rpx"
            shape="circle"
            border="none"
            :customStyle="{
              width: '100%',
              background: '#F6F7FB',
              height: '70rpx',
              padding: '0 20rpx',
            }"
          >
            <template v-slot:suffix>
              <view class="unit"> {{$t('米')}} </view>
            </template>
          </u-input>
        </view>
      </view>

      <view class="title"> <text style="color: red">*</text>{{$t('载具容积')}}(m³) </view>
      <input
        type="number"
        v-model="pickerForm.product_volume"
        class="info_text"
        placeholder="请输入"
      />

      <view class="title"> <text style="color: red">*</text>{{$t('载具载重')}}(t) </view>
      <input
        type="number"
        v-model="pickerForm.product_weight"
        class="info_text"
        placeholder="请输入"
      />

      <view class="title"> {{$t('上传车辆照片')}} </view>
      <u-upload
        :fileList="fileList0"
        name="0"
        multiple
        :maxCount="10"
        :previewFullImage="true"
        @afterRead="afterRead"
        @delete="deletePic"
      ></u-upload>

      <view class="title"> {{$t('相关证件')}} </view>
      <u-upload
        :fileList="fileList1"
        name="1"
        multiple
        :maxCount="10"
        :previewFullImage="true"
        @afterRead="afterRead"
        @delete="deletePic"
      ></u-upload>

      <view class="title"> <text style="color: red">*</text>{{$t('主营线路')}} </view>

      <view class="car_line" v-for="(item, index) in inputs" :key="index">
        <view class="item">
          <city
            is_all="true"
            :value="inputs[index].startvalue"
            @change="
              (e) => {
                inputs[index].startvalue = [e.column1.value, e.column2.value, e.column3.value].join(',');
                inputs[index].startcountry = e.column1.value;
                inputs[index].startprovince = e.column2.value;
                inputs[index].startname = e.column2.value == -1 || e.column3.value == -1 ?
									[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
									e.column3.label;
              }
            "
          >
            <div class="fz24">{{ inputs[index].startname || $t('请选择') }}</div>
          </city>
        </view>
        <image
          class="ico"
          src="/static/img/ico_line5.png"
          mode="widthFix"
          @click="selectChange(item, index)"
        >
        </image>
        <view class="item">
          <city
            :value="inputs[index].endvalue"
            is_all="true"
            @change="
              (e) => {
                inputs[index].endvalue = [e.column1.value, e.column2.value, e.column3.value].join(',');
                inputs[index].endcountry = e.column1.value;
                inputs[index].endprovince = e.column2.value;
                inputs[index].endname = e.column2.value == -1 || e.column3.value == -1 ?
									[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
									e.column3.label;
              }
            "
          >
            <div class="fz24">{{ inputs[index].endname || $t('请选择') }}</div>
          </city>
        </view>
        <u-icon
          v-if="index == 0"
          class="ico_add"
          name="plus-circle"
          color="#999"
          size="36rpx"
          @click="addInput"
        ></u-icon>
        <u-icon
          v-if="index !== 0"
          class="ico_delete"
          name="minus-circle"
          color="#999"
          size="36rpx"
          @click="removeInput(index)"
        ></u-icon>
      </view>
    </view>
    <view class="footer_none"></view>
    <view class="footer_btns">
      <view class="btn" @click="submit_sub">{{$t('修改')}}/{{$t('保存')}}</view>
      <view class="btn_red" @click="submit_delect">{{$t('删除')}}</view>
    </view>

    <u-picker
      :closeOnClickOverlay="true"
      ref="pickerState"
      keyName="label"
      :itemHeight="80"
      :show="pickerState"
      :columns="columnState"
      @confirm="confirmChange($event, 'pickerState', 'stateVal', 'stateName')"
      @cancel="pickerState = false"
      @close="pickerState = false"
    ></u-picker>

    <u-picker
      :closeOnClickOverlay="true"
      ref="pickerDriver"
      keyName="title"
      :itemHeight="80"
      :show="pickerDriver"
      :columns="columnDriver"
      @confirm="
        confirmChange($event, 'pickerDriver', 'driverVal', 'driverName')
      "
      @cancel="pickerDriver = false"
      @close="pickerDriver = false"
    ></u-picker>

    <u-picker
      :closeOnClickOverlay="true"
      ref="pickerTran"
      keyName="label"
      :itemHeight="80"
      :show="pickerTran"
      :columns="columnTran"
      @confirm="
        confirmChange($event, 'pickerTran', 'transportVal', 'transportName')
      "
      @cancel="pickerTran = false"
      @close="pickerTran = false"
    ></u-picker>

    <u-picker
      :closeOnClickOverlay="true"
      ref="pickerCategory"
      keyName="title"
      :itemHeight="80"
      :show="pickerCategory"
      :columns="columnCategory"
      @confirm="
        confirmChange(
          $event,
          'pickerCategory',
          'car_category_id',
          'car_category_name'
        )
      "
      @cancel="pickerCategory = false"
      @close="pickerCategory = false"
    ></u-picker>
  </view>
</template>

<script>
import {
  driver_select,
  delivery_vehicle,
  transport_save,
  transport_del,
} from "@/api/driver";
import citySelect from "@/pages/publish/components/citySelect.vue";
export default {
  components: {
    citySelect,
  },
  data() {
    return {
      identity_type: uni.getStorageSync("identity_type"),
      statusBarHeight: uni.getStorageSync("statusBarHeight") || 0,
      isDel: true,
      fileList0: [],
      fileList1: [],
      MAGE_URL: "https://gluz-oss.oss-cn-beijing.aliyuncs.com",
      inputs: [
        { startvalue: "", startname: "", endvalue: "", endname: "", step: 0 },
      ],
      columnState: [
        [
          {
            label: this.$t('工作'),
            id: 3,
          },
          {
            label: this.$t('空闲'),
            id: 1,
          },
          {
            label: this.$t('正常'),
            id: 2,
          },
          {
            label: this.$t('停运'),
            id: 4,
          },
        ],
      ],
      submit_loading: false,
      pickerState: false,
      pickerDriver: false,
      pickerTran: false,
      pickerCategory: false,
      showCityPicker: false,
      pickerForm: {
        id: "",
        stateVal: "",
        stateName: "",
        driverVal: "",
        driverName: "",
        transportVal: "",
        transportName: "",
        car_number: "",
        trailer_number: "",
        car_l: "",
        car_w: "",
        car_h: "",
        product_weight: "",
        product_volume: "",
        car_category_id: "",
        car_category_name: "",
        current_city_id: "",
        current_city_name: "",
      },
      columnDriver: [],
      columnCategory: [],
      columnTran: [
        [
          {
            label: this.$t('汽运'),
            id: 2,
          },
          {
            label: this.$t('空运'),
            id: 3,
          },
          {
            label: this.$t('海运'),
            id: 4,
          },
          {
            label: this.$t('铁路'),
            id: 5,
          },
        ],
      ],
      driverInfor: {},
    };
  },
  async onLoad(options) {
    this.driverInfor = JSON.parse(options.driverInfor);
    this.pickerForm.id = this.driverInfor.id;
    this.pickerForm.stateVal = this.driverInfor.status;
    if (this.driverInfor.driver) {
      this.pickerForm.driverVal = this.driverInfor.driver_id;
      this.pickerForm.driverName = this.driverInfor.driver.title;
    }

    // let driverNames=await  this.driverSelects()
    // this.pickerForm.driverName=driverNames[0].filter((item)=>{
    //  if(item.id==this.pickerForm.driverVal){
    // 	 return item
    //  }
    // })[0].title
    this.pickerForm.transportVal = this.driverInfor.mode;
    this.pickerForm.transportName = this.columnTran[0].filter((item) => {
      if (item.id == this.pickerForm.transportVal) {
        return item;
      }
    })[0].label;
    this.pickerForm.car_category_id = this.driverInfor.car_category_id;
    this.pickerForm.car_category_name = this.driverInfor.category.title;
    this.pickerForm.car_number = this.driverInfor.car_number;
    this.pickerForm.trailer_number = this.driverInfor.trailer_number;
    this.pickerForm.car_l = this.driverInfor.car_l;
    this.pickerForm.car_w = this.driverInfor.car_w;
    this.pickerForm.car_h = this.driverInfor.car_h;
    this.pickerForm.product_weight = this.driverInfor.product_weight;
    this.pickerForm.product_volume = this.driverInfor.product_volume;

    this.pickerForm.current_city_id = this.driverInfor.current_city_id;

    if (this.driverInfor.logo) {
      this.fileList1 = this.driverInfor.logo.split(",").map((path) => {
        if (path.startsWith("https")) {
          return { url: path };
        } else {
          return { url: this.MAGE_URL + path };
        }
      });
    }

    if (this.driverInfor.image) {
      this.fileList0 = this.driverInfor.image.split(",").map((path) => {
        if (path.startsWith("https")) {
          return { url: path };
        } else {
          return { url: this.MAGE_URL + path };
        }
      });
    }
    if (this.driverInfor.luxian.length > 0) {
      let transport_lists = [];


      this.driverInfor.luxian.map((v_item, index) => {
        let transport_list = {
          startvalue: v_item.cfd?.id,
          startname: v_item.cfd?.shortname,
          endvalue: v_item.mdd?.id,
          endname: v_item.mdd?.shortname,
          step: index,
        };
        transport_lists.push(transport_list);
      });
      this.inputs = transport_lists;
    }

    this.driverSelect();
    this.deliveryVehicles(this.pickerForm.transportVal);
  },
  methods: {
    back() {
      // uni.navigateBack()
      this.cback();
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: this.$t('上传中'),
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.url,
          })
        );
        fileListLen++;
      }
    },
    selectChange(v_item, v_index) {
      this.inputs[v_index].startvalues = this.inputs[v_index].startvalue;
      this.inputs[v_index].endvalues = this.inputs[v_index].endvalue;

      this.inputs[v_index].startnames = this.inputs[v_index].startname;
      this.inputs[v_index].endnames = this.inputs[v_index].endname;
      this.inputs[v_index].startname = this.inputs[v_index].endnames;
      this.inputs[v_index].endname = this.inputs[v_index].startnames;
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: "https://app.gluz.com.cn/api/common/upload",
          filePath: url,
          name: "file",
          success: (res) => {
            setTimeout(() => {
              resolve(JSON.parse(res.data).data);
            }, 1000);
          },
        });
      });
    },
    addInput() {
      this.inputs.push({
        startvalue: "",
        startname: "",
        endvalue: "",
        endname: "",
        step: 0,
      });
    },
    removeInput(index) {
      if (this.inputs.length > 1) {
        this.inputs.splice(index, 1);
      } else {
        uni.showToast({
          title: this.$t('至少保留一个输入框'),
          icon: "none",
        });
      }
    },
    pickerCategoryChange() {
      if (this.pickerForm.transportVal == "") {
        uni.showToast({
          title: this.$t('请选择运输类型'),
          icon: "none",
        });
        return false;
      }
      this.pickerCategory = true;
    },
    submit_delect() {
      if (this.driverInfor.status == 3) {
        uni.showToast({
          title: this.$t('订单进行中，无法删除'),
          icon: "none",
        });
        return;
      }
      this.submit_loading = true;
      setTimeout(() => {
        this.submit_loading = false;
      }, 1000);
      let pickerForms = {
        id: this.pickerForm.id,
      };

      uni.showModal({
        title: this.$t('温馨提示'),
        content: this.$t('是否删除车辆信息'),
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            transport_del(pickerForms).then((res) => {
              uni.$emit("refreshIfNeeded", true);
              uni.navigateBack({
                delta: 1,
              });
            });
          }
        },
      });
    },
    submit_sub() {
      if (this.driverInfor.status == 3) {
        uni.showToast({
          title: "订单进行中，无法修改/保存车辆信息",
          icon: "none",
        });
        return;
      }
      this.submit_loading = true;
      setTimeout(() => {
        this.submit_loading = false;
      }, 1000);
      if (this.pickerForm.driverVal == "") {
        // uni.showToast({
        //   title: this.$t('请选择司机'),
        //   icon: 'none'
        // });
        // return false
      }
      if (this.pickerForm.transportVal == "") {
        uni.showToast({
          title: this.$t('请选择运输类型'),
          icon: "none",
        });
        return false;
      }
      if (this.pickerForm.car_category_id == "") {
        uni.showToast({
          title: this.$t('请选择载具类型'),
          icon: "none",
        });
        return false;
      }
      if (this.pickerForm.car_number == "") {
        let Toast = this.$t('请输入信息');
        if (this.pickerForm.transportVal == 2) Toast = "请输入车牌号-挂车号";
        if (this.pickerForm.transportVal == 3) Toast = this.$t('航班号');
        if (this.pickerForm.transportVal == 4) Toast = this.$t('箱号');
        if (this.pickerForm.transportVal == 5) Toast = this.$t('车号');
        uni.showToast({
          title: Toast,
          icon: "none",
        });
        return false;
      }
      if (
        this.pickerForm.car_l == "" &&
        this.pickerForm.car_w == "" &&
        this.pickerForm.car_h == ""
      ) {
        uni.showToast({
          title: this.$t('请输入载具尺寸信息'),
          icon: "none",
        });
        return false;
      }
      if (this.pickerForm.product_volume == "") {
        uni.showToast({
          title: this.$t('请输入载具容积'),
          icon: "none",
        });
        return false;
      }
      if (this.pickerForm.product_weight == "") {
        uni.showToast({
          title: this.$t('请输入载具载重'),
          icon: "none",
        });
        return false;
      }
      //主营路线必选
      let valid = true;
  
      this.inputs.forEach((item) => {
        if (!item.startvalue || !item.endvalue) {
          valid = false;
        }
      });
      if (!valid) {
        uni.showToast({
          title: this.$t('请完善主营路线'),
          icon: "none",
        });
        return false;
      }

      let resultValue = "";
      resultValue = this.inputs
        .map((item,index) => {
          if (item.startvalue && item.endvalue) {
            return `${item.startvalue},${item.endvalue},${index}`;
          }
        })
        .join(";");

    
      let fileLists = "";
      if (this.fileList1.length > 0) {
        fileLists = this.fileList1.map((user) => user.url).join(",");
      }
      let pickerForms = {
        user_id: uni.getStorageSync("user_id"),
        id: this.pickerForm.id || 0,
        status: this.pickerForm.stateVal,
        driver_id: this.pickerForm.driverVal,
        mode: this.pickerForm.transportVal,
        car_number: this.pickerForm.car_number,
        trailer_number: this.pickerForm.trailer_number,
        car_l: this.pickerForm.car_l,
        car_w: this.pickerForm.car_w,
        car_h: this.pickerForm.car_h,
        product_weight: this.pickerForm.product_weight,
        product_volume: this.pickerForm.product_volume,
        car_category_id: this.pickerForm.car_category_id,
        current_city_id: this.pickerForm.current_city_id,
        logo: fileLists,
        image: this.fileList0.map((user) => user.url).join(","),
        transport_list: resultValue,
      };
      transport_save(pickerForms).then((res) => {
        uni.$emit("refreshIfNeeded", true);
        uni.navigateBack({
          delta: 1,
        });
      });
    },
    confirmChange(e, v_type, v_value, v_name) {
      this.pickerForm[v_value] = e.value[0].id;
      if (v_type == "pickerDriver" || v_type == "pickerCategory") {
        this.pickerForm[v_name] = e.value[0].title;
      }
      if (v_type != "pickerDriver" && v_type != "pickerCategory") {
        this.pickerForm[v_name] = e.value[0].label;
      }
      this.$data[v_type] = false;
      if (v_type == "pickerTran") {
        this.deliveryVehicle(e.value[0].id);
      }
    },
    deliveryVehicle(v_way) {
      delivery_vehicle({
        transport_way: v_way,
      }).then((res) => {
        this.columnCategory = [[...res.data.data.data]];
        this.pickerForm.car_category_id = "";
        this.pickerForm.car_category_name = "";
      });
    },
    deliveryVehicles(v_way) {
      //return new Promise((resolve,reject)=>{
      delivery_vehicle({
        transport_way: v_way,
      }).then((res) => {
        this.columnCategory = [[...res.data.data.data]];
        //resolve([[...res.data.data.data]])
        //})
      });
    },
    driverSelect() {
      driver_select({
        user_id: uni.getStorageSync("user_id"),
      }).then((res) => {
        this.columnDriver = [[...res.data.data.data]];
      });
    },
    driverSelects() {
      return new Promise((resolve, reject) => {
        driver_select({
          user_id: uni.getStorageSync("user_id"),
        }).then((res) => {
          resolve([[...res.data.data.data]]);
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.topSty {
  position: sticky;
  z-index: 10;
  top: 0;
  background: #fff;
}
page {
  background-color: #f6f7fb;
}

.header {
  font-size: 34rpx;
  height: 100rpx;
  line-height: 100rpx;
  font-weight: bold;
  text-align: center;
  position: relative;
  .xxxx {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}

.back {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  top: 18rpx;
}

/deep/.u-upload__wrap__preview__image {
  width: 80px !important;
  height: 80px !important;
}

/deep/.u-upload__button {
  width: 80px !important;
  height: 80px !important;
}

/deep/.u-upload__deletable,
/deep/.u-upload__success {
  width: 40rpx !important;
  height: 40rpx !important;
}

/deep/.uicon-camera-fill {
  width: 32px !important;
  height: 32px !important;
  font-size: 32px !important;
}

/deep/.u-icon__icon {
  font-size: 32px;
}

/deep/.uicon-close {
  font-size: 32rpx !important;
  line-height: 32rpx !important;
}

/deep/.uicon-checkmark {
  font-size: 32rpx !important;
  line-height: 32rpx !important;
}

.car_line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18rpx;

  &:last-child {
    margin: 0;
  }

  .ico {
    flex-shrink: 0;
    width: 26rpx;
    margin: 0 20rpx;
  }

  .item {
    width: 100%;
    background: #f6f7fb;
    height: 80rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24rpx;
  }

  .ico_add {
    flex-shrink: 0;
    margin-left: 20rpx;
  }
}

.footer_btn2 {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 30rpx 24rpx 60rpx;

  .btn_yellow {
    width: 340rpx;
    height: 94rpx;
    text-align: center;
    line-height: 94rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    border: 2rpx solid rgba(241, 122, 3, 0.1);
    background: linear-gradient(90deg, #ff811e 0%, #ffbe7c 100%);
    color: #fff;
    font-size: 30rpx;
    font-weight: 600;
  }

  .btn_blue {
    width: 340rpx;
    height: 94rpx;
    text-align: center;
    line-height: 94rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    border: 2rpx solid rgba(3, 189, 130, 0.1);
    background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
    color: #fff;
    font-size: 30rpx;
    font-weight: 600;
  }
}

.bor_bgff {
  margin: 24rpx 24rpx 20rpx 24rpx;
  background: #fff;
  border-radius: 20rpx;
}

.item_cc {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item {
    width: 200rpx;
    height: 80rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    background: #f6f7fb;
    color: #333;
    font-size: 26rpx;
    line-height: 80rpx;
    text-align: center;
  }

  .unit {
    color: #1d1d1d;
    font-size: 26rpx;
    line-height: 34rpx;
  }
}

.publish_time_calendars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16rpx;

  .line {
    width: 42rpx;
    height: 1rpx;
    background: #d8d8d8;
  }

  .item {
    width: 294rpx;
    height: 80rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    background: #f6f7fb;
    color: #333;
    font-size: 26rpx;
    line-height: 80rpx;
    text-align: center;
  }
}

.info_input {
  width: 100%;
  font-size: 26rpx;
  line-height: 40px;
}

.transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  border-radius: 20rpx;
  background: #f6f7fb;
  padding: 0 20rpx 0 20rpx;

  .transport_name {
    color: #333;
    font-size: 26rpx;
    line-height: 30px;
  }
}

.screen {
  padding: 0 24rpx 30rpx;

  .title {
    color: #1d1d1d;
    font-size: 28rpx;
    font-weight: 600;
    line-height: 28rpx;
    padding: 34rpx 0 24rpx;
    position: relative;

    .xuan {
      position: absolute;
      right: 0;
      top: 34rpx;
      color: #278aff;
      font-size: 26rpx;
      font-weight: normal;
    }
  }

  .info_text {
    border-radius: 18rpx;
    background: #f6f7fb;
    color: #333;
    font-size: 26rpx;
    height: 80rpx;
    padding: 0 20rpx;
  }
}

.footer_none {
  width: 100%;
  height: 210rpx;
}

.footer_btn {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  background: #fff;
  padding: 30rpx 30rpx 60rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

  .btn {
    width: 100%;
    height: 90rpx;
    border-radius: 50rpx;
    background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
    color: #fff;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    font-weight: 600;
  }

  .btn_red {
    width: 100%;
    height: 110rpx;
    background: #ffb6b6;
    color: #ff1f1f;
    text-align: center;
    line-height: 110rpx;
    font-size: 32rpx;
  }
}

.footer_btns {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  background: #fff;
  padding: 30rpx 30px;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .btn,
  .btn_red {
    width: 45%;
    line-height: 110rpx;
    border-radius: 50rpx;
    background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
    color: #fff;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    font-weight: 600;
  }

  .btn_red {
    background: linear-gradient(90deg, #ff6a6a 0%, #fc8d8d 100%);
  }
}
</style>
